
<template>
  <section class="quality-panel">
    <dl class="q-top">
      <dt>{{navInfo.title}}</dt>

      <dd
        v-for="item of navInfo.items"
        :key='item.kind'
        @mouseenter="mouseenterHandler('sss')"
        @mouseleave="mouseoverHandler"
      >{{item.text}}</dd>


      <div class="triangle"></div>
    </dl>
    <div class="q-bottom">
      <a
        href=""
        v-for="(item,index) of currentGoods"
        :key=index
      >
        <img
          :src="item.img"
          class="image"
        >
        <p>{{item.shopName}}</p>
        <p>{{item.foodName}}</p>
        <p>¥{{item.nowPrice}}门市价¥{{item.oldPrice}}{{item.address}}</p>
      </a>

    </div>
  </section>
</template>


<script>
export default {
  data() {
    return {
      navInfo: {
        title: "有格调",
        items: [
          {
            kind: "all",
            keyword: "景点",
            text: "全部"
          },
          {
            kind: "food",
            keyword: "美食",
            text: "约会聚餐"
          },
          {
            kind: "spa",
            keyword: "丽人",
            text: "丽人SPA"
          },
          {
            kind: "movie",
            keyword: "电影",
            text: "电影演出"
          },
          {
            kind: "travel",
            keyword: "旅游",
            text: "品质出游"
          }
        ]
      },
      goodsList: {
        all: [
          {
            img:
              "//p0.meituan.net/msmerchant/6275ca1bdb38862e15499e73a284487b460199.jpg@368w_208h_1e_1c",
            shopName: "旬野菜新派日式火锅（东方广场店）",
            foodName: "单人午市自助餐",
            nowPrice: 133,
            oldPrice: 148,
            address: "王府井/东单"
          },
          {
            img:
              "//p0.meituan.net/msmerchant/6275ca1bdb38862e15499e73a284487b460199.jpg@368w_208h_1e_1c",
            shopName: "旬野菜新派日式火锅（东方广场店）",
            foodName: "单人午市自助餐",
            nowPrice: 133,
            oldPrice: 148,
            address: "王府井/东单"
          },
          {
            img:
              "//p0.meituan.net/msmerchant/6275ca1bdb38862e15499e73a284487b460199.jpg@368w_208h_1e_1c",
            shopName: "旬野菜新派日式火锅（东方广场店）",
            foodName: "单人午市自助餐",
            nowPrice: 133,
            oldPrice: 148,
            address: "王府井/东单"
          },
          {
            img:
              "//p0.meituan.net/msmerchant/6275ca1bdb38862e15499e73a284487b460199.jpg@368w_208h_1e_1c",
            shopName: "旬野菜新派日式火锅（东方广场店）",
            foodName: "单人午市自助餐",
            nowPrice: 133,
            oldPrice: 148,
            address: "王府井/东单"
          },
          {
            img:
              "//p0.meituan.net/msmerchant/6275ca1bdb38862e15499e73a284487b460199.jpg@368w_208h_1e_1c",
            shopName: "旬野菜新派日式火锅（东方广场店）",
            foodName: "单人午市自助餐",
            nowPrice: 133,
            oldPrice: 148,
            address: "王府井/东单"
          },
          {
            img:
              "//p0.meituan.net/msmerchant/6275ca1bdb38862e15499e73a284487b460199.jpg@368w_208h_1e_1c",
            shopName: "旬野菜新派日式火锅（东方广场店）",
            foodName: "单人午市自助餐",
            nowPrice: 133,
            oldPrice: 148,
            address: "王府井/东单"
          }
        ],
        food: [
          {
            img:
              "//p1.meituan.net/msmerchant/3fb7c5ebb2e57003dc4a0733568c9683339216.jpg@368w_208h_1e_1c",
            shopName: "旬野菜新派日式火锅（东方广场店）",
            foodName: "单人午市自助餐",
            nowPrice: 133,
            oldPrice: 148,
            address: "王府井/东单"
          },
          {
            img:
              "//p1.meituan.net/msmerchant/3fb7c5ebb2e57003dc4a0733568c9683339216.jpg@368w_208h_1e_1c",
            shopName: "旬野菜新派日式火锅（东方广场店）",
            foodName: "单人午市自助餐",
            nowPrice: 133,
            oldPrice: 148,
            address: "王府井/东单"
          },
          {
            img:
              "//p1.meituan.net/msmerchant/3fb7c5ebb2e57003dc4a0733568c9683339216.jpg@368w_208h_1e_1c",
            shopName: "旬野菜新派日式火锅（东方广场店）",
            foodName: "单人午市自助餐",
            nowPrice: 133,
            oldPrice: 148,
            address: "王府井/东单"
          },
          {
            img:
              "//p1.meituan.net/msmerchant/3fb7c5ebb2e57003dc4a0733568c9683339216.jpg@368w_208h_1e_1c",
            shopName: "旬野菜新派日式火锅（东方广场店）",
            foodName: "单人午市自助餐",
            nowPrice: 133,
            oldPrice: 148,
            address: "王府井/东单"
          },
          {
            img:
              "//p1.meituan.net/msmerchant/3fb7c5ebb2e57003dc4a0733568c9683339216.jpg@368w_208h_1e_1c",
            shopName: "旬野菜新派日式火锅（东方广场店）",
            foodName: "单人午市自助餐",
            nowPrice: 133,
            oldPrice: 148,
            address: "王府井/东单"
          },
          {
            img:
              "//p1.meituan.net/msmerchant/3fb7c5ebb2e57003dc4a0733568c9683339216.jpg@368w_208h_1e_1c",
            shopName: "旬野菜新派日式火锅（东方广场店）",
            foodName: "单人午市自助餐",
            nowPrice: 133,
            oldPrice: 148,
            address: "王府井/东单"
          }
        ],
        spa: [
          {
            img:
              "//p0.meituan.net/wedding/dfe04d985e5e69edf401cedf4dc2b3b14127713.jpg@240w_180h_1e_1c_1l|watermark=1&amp;&amp;r=2&amp;p=9&amp;x=2&amp;y=2&amp;relative=1&amp;o=20|368w_208h_1e_1c",
            shopName: "旬野菜新派日式火锅（东方广场店）",
            foodName: "单人午市自助餐",
            nowPrice: 133,
            oldPrice: 148,
            address: "王府井/东单"
          },
          {
            img:
              "//p0.meituan.net/wedding/dfe04d985e5e69edf401cedf4dc2b3b14127713.jpg@240w_180h_1e_1c_1l|watermark=1&amp;&amp;r=2&amp;p=9&amp;x=2&amp;y=2&amp;relative=1&amp;o=20|368w_208h_1e_1c",
            shopName: "旬野菜新派日式火锅（东方广场店）",
            foodName: "单人午市自助餐",
            nowPrice: 133,
            oldPrice: 148,
            address: "王府井/东单"
          },
          {
            img:
              "//p0.meituan.net/wedding/dfe04d985e5e69edf401cedf4dc2b3b14127713.jpg@240w_180h_1e_1c_1l|watermark=1&amp;&amp;r=2&amp;p=9&amp;x=2&amp;y=2&amp;relative=1&amp;o=20|368w_208h_1e_1c",
            shopName: "旬野菜新派日式火锅（东方广场店）",
            foodName: "单人午市自助餐",
            nowPrice: 133,
            oldPrice: 148,
            address: "王府井/东单"
          },
          {
            img:
              "//p0.meituan.net/wedding/dfe04d985e5e69edf401cedf4dc2b3b14127713.jpg@240w_180h_1e_1c_1l|watermark=1&amp;&amp;r=2&amp;p=9&amp;x=2&amp;y=2&amp;relative=1&amp;o=20|368w_208h_1e_1c",
            shopName: "旬野菜新派日式火锅（东方广场店）",
            foodName: "单人午市自助餐",
            nowPrice: 133,
            oldPrice: 148,
            address: "王府井/东单"
          },
          {
            img:
              "//p0.meituan.net/wedding/dfe04d985e5e69edf401cedf4dc2b3b14127713.jpg@240w_180h_1e_1c_1l|watermark=1&amp;&amp;r=2&amp;p=9&amp;x=2&amp;y=2&amp;relative=1&amp;o=20|368w_208h_1e_1c",
            shopName: "旬野菜新派日式火锅（东方广场店）",
            foodName: "单人午市自助餐",
            nowPrice: 133,
            oldPrice: 148,
            address: "王府井/东单"
          },
          {
            img:
              "//p0.meituan.net/wedding/dfe04d985e5e69edf401cedf4dc2b3b14127713.jpg@240w_180h_1e_1c_1l|watermark=1&amp;&amp;r=2&amp;p=9&amp;x=2&amp;y=2&amp;relative=1&amp;o=20|368w_208h_1e_1c",
            shopName: "旬野菜新派日式火锅（东方广场店）",
            foodName: "单人午市自助餐",
            nowPrice: 133,
            oldPrice: 148,
            address: "王府井/东单"
          }
        ],
        movie: [
          {
            img:
              "//p0.meituan.net/deal/201108/05/3_0805163047.jpg@368w_208h_1e_1c",
            shopName: "旬野菜新派日式火锅（东方广场店）",
            foodName: "单人午市自助餐",
            nowPrice: 133,
            oldPrice: 148,
            address: "王府井/东单"
          },
          {
            img:
              "//p0.meituan.net/deal/201108/05/3_0805163047.jpg@368w_208h_1e_1c",
            shopName: "旬野菜新派日式火锅（东方广场店）",
            foodName: "单人午市自助餐",
            nowPrice: 133,
            oldPrice: 148,
            address: "王府井/东单"
          },
          {
            img:
              "//p0.meituan.net/deal/201108/05/3_0805163047.jpg@368w_208h_1e_1c",
            shopName: "旬野菜新派日式火锅（东方广场店）",
            foodName: "单人午市自助餐",
            nowPrice: 133,
            oldPrice: 148,
            address: "王府井/东单"
          },
          {
            img:
              "//p0.meituan.net/deal/201108/05/3_0805163047.jpg@368w_208h_1e_1c",
            shopName: "旬野菜新派日式火锅（东方广场店）",
            foodName: "单人午市自助餐",
            nowPrice: 133,
            oldPrice: 148,
            address: "王府井/东单"
          },
          {
            img:
              "//p0.meituan.net/deal/201108/05/3_0805163047.jpg@368w_208h_1e_1c",
            shopName: "旬野菜新派日式火锅（东方广场店）",
            foodName: "单人午市自助餐",
            nowPrice: 133,
            oldPrice: 148,
            address: "王府井/东单"
          },
          {
            img:
              "//p0.meituan.net/deal/201108/05/3_0805163047.jpg@368w_208h_1e_1c",
            shopName: "旬野菜新派日式火锅（东方广场店）",
            foodName: "单人午市自助餐",
            nowPrice: 133,
            oldPrice: 148,
            address: "王府井/东单"
          }
        ],
        travel: [
          {
            img:
              "//p1.meituan.net/tdchotel/3bc522be1b12f14143464d48ce51410e735348.png@368w_208h_1e_1c",
            shopName: "旬野菜新派日式火锅（东方广场店）",
            foodName: "单人午市自助餐",
            nowPrice: 133,
            oldPrice: 148,
            address: "王府井/东单"
          },
          {
            img:
              "//p1.meituan.net/tdchotel/3bc522be1b12f14143464d48ce51410e735348.png@368w_208h_1e_1c",
            shopName: "旬野菜新派日式火锅（东方广场店）",
            foodName: "单人午市自助餐",
            nowPrice: 133,
            oldPrice: 148,
            address: "王府井/东单"
          },
          {
            img:
              "//p1.meituan.net/tdchotel/3bc522be1b12f14143464d48ce51410e735348.png@368w_208h_1e_1c",
            shopName: "旬野菜新派日式火锅（东方广场店）",
            foodName: "单人午市自助餐",
            nowPrice: 133,
            oldPrice: 148,
            address: "王府井/东单"
          },
          {
            img:
              "//p1.meituan.net/tdchotel/3bc522be1b12f14143464d48ce51410e735348.png@368w_208h_1e_1c",
            shopName: "旬野菜新派日式火锅（东方广场店）",
            foodName: "单人午市自助餐",
            nowPrice: 133,
            oldPrice: 148,
            address: "王府井/东单"
          },
          {
            img:
              "//p1.meituan.net/tdchotel/3bc522be1b12f14143464d48ce51410e735348.png@368w_208h_1e_1c",
            shopName: "旬野菜新派日式火锅（东方广场店）",
            foodName: "单人午市自助餐",
            nowPrice: 133,
            oldPrice: 148,
            address: "王府井/东单"
          },
          {
            img:
              "//p1.meituan.net/tdchotel/3bc522be1b12f14143464d48ce51410e735348.png@368w_208h_1e_1c",
            shopName: "旬野菜新派日式火锅（东方广场店）",
            foodName: "单人午市自助餐",
            nowPrice: 133,
            oldPrice: 148,
            address: "王府井/东单"
          }
        ]
      },
      currentKind: "all"
    };
  },

  components: {},

  computed: {
    currentGoods() {
      return this.goodsList[this.currentKind];
    }
  },

  methods: {
    mouseoverHandler(e) {
      // e.target.className = "";
    },
    mouseenterHandler(e, w) {
      console.log(e.target,w);
      // console.log(kind);

      // e.target.className = "active";
      // this.currentKind = kind

    }
  }
};
</script>
<style lang='scss' scoped>
.quality-panel {
  width: 1190px;
  // height: 694px;
  background-color: #fff;
  margin: 40px auto;
  .q-top {
    width: 100%;
    height: 44px;
    line-height: 44px;
    border-top-right-radius: 5px;
    border-top-left-radius: 5px;
    box-sizing: border-box;
    font-size: 14px;
    color: #fff;
    background-color: rgb(190, 164, 116);
    background-image: linear-gradient(
      to right,
      rgb(194, 176, 142) 3%,
      rgb(190, 164, 116) 100%
    );
    & > * {
      float: left;
    }
    dt {
      font-size: 18px;
      margin-left: 13px;
      margin-right: 10px;
      position: relative;
      float: left;
      padding: 0 5px;
      text-transform: uppercase;
      cursor: pointer;
    }
    // 用acitve怎么写啊
    dd {
      position: relative;
      padding: 0 5px;
      cursor: pointer;
      &.active {
        &::after {
          position: absolute;
        border-left: 5px solid transparent;
        border-right: 5px solid transparent;
        border-bottom: 7px solid#fff;
        content: " ";
        display: block;
        width: 2px;
        height: 0;
        top: 37px;
        left: 0;
        right: 0;
        margin: auto;
        }
      }
    }
  }
  .q-bottom {
    margin-top: 10px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    box-sizing: border-box;
    border-left: 1px solid #e5e5e5;
    border-right: 1px solid #e5e5e5;
    border-bottom: 1px solid #e5e5e5;
    padding: 5px;

    a {
      height: 304px;
      width: 33.33%;
      padding: 10px;
      // padding-bottom: 0;
      box-sizing: border-box;
      &:hover {
        background: #f4f4f4;
        -webkit-transition: background-color 0.5s;
        -ms-transition: background-color 0.5s;
        transition: background-color 0.5s;
        border-radius: 4px;
      }
      img {
        border-radius: 4px;
      }
    }
  }
}
</style>

